INTRODUCTION
Working in the NIHI digital team to develop a research website and supporting infographics, taking ownership of the pages shown below. These materials showcase the work of the University of Auckland academic team in antibiotic stewardship, promoting safe antibiotic use for future generations in Aotearoa. TEAM
Alexandra Rengifo, DesignerAdrianna Yiu, Designer
Myself, Designer
Elaine Umali, Digital Programme Manager
Ross Baker, Developer
WHAT I CONTRIBUTED IN
Stakeholder InterviewsStakeholder Communication
Wireframing and Prototyping
Design System
Copy Writing
Infographics
RESULTS
A website that pioneers safe antibiotic use for patients and GPs. BACKGROUND
Antibiotic Conservation AotearoaWEBSITE OBJECTIVE
Co-designed with experts and GPs, Antibiotic Conservation Aotearoa aims to reduce inappropriate antibiotic prescribing and empower patients to make informed health decisions. SECONDARY RESEARCH / COMPETETIVE ANALYSIS
Why do current research websites feel so cold?KEY TAKEAWAY #1
🧊 Clinical and robotic communication.Medical jargon, in addition to the crowded layouts may cause users to feel overwhelmed upon onboarding.
KEY TAKEAWAY #2
🧩 Lack of intuitive design and exploration nudges.Complicated navigation and lack of user control may cause users to feel out of place and give up on the task more quickly.
PRIMARY RESEARCH / INTERVIEWS AND WORKSHOP
Co-designing with the research teamWe conducted informal interviews with researchers and stakeholders, and later with our findings, showing them initial wireframes and iterating from there. The overarching goal was mantaining a balance in considerations when designing for both the well-versed clinician and the patient or layperson, in clinic and in home setting. SYNTHESIS
Key considerations for the initial set of wireframes
Experimenting with various ways of adding interactive portions to encourage exploration and nudge to leads, such as hover cards and switch tabs.
Markers of legitimacy.
Adding visual markers that signify legitimacy of information. For example, utilising statistics for immediate context call-out.
Designing with content limits.
At sections with pending content, create versions that display design with maximum character limit to control drastic design changes down the line.
FOCUS
After this stage, the main focus was to solidify website standing by weaving branding and research insights.UI KIT
Establishing a sense of warmth and dependability with type and colourThe UI kit was built over time. My contribution for its foundation was establiblishing the font pairing and suggesting the primary colour for the website. I opted for simple and rounded typefaces aimed at creating feelings of friendliness, and created an initial color palette that for me symbolised both “future” and “tenacity”, words descriptive of the project goal.
FINAL DESIGNS
“How do we relay scientific research to cater to both the patients and clinicians?” I was in charge of the following screens: Resource Hub, Publication pages and About Us.HOW MIGHT WE
Organise the information on the website so that navigating material and topics is easy?
SYNTHESIS
Accessible filter
Detailed but accessible copy.
Considering the diverse skill levels of users interacting with the website, with simple copy, are able to explore with less navigation friction.
HOW MIGHT WE
Eliminate the cold and “clinical” expression of information?SYNTHESIS
Human-focus approachInvestigator focus.
Softening the process of finding learning material which often times feels static and cold by specifying dates, resource type and authors. In this way, the response of feeling with the interactions are immediate.
SYNTHESIS
Intentional suggestions
Clear course of action.
Increasing the flow by providing related suggestions, and having a multitude of actions available on a single page at a time.
User control.
HOW MIGHT WE
Go about designing the our research and about page?
SYNTHESIS
Encapsulating the crux of the project advocacy
Considerate and sharp.
To avoid information overwhelm, utilising layout options to transform what would be visually chunky information into beautiful, easily digestible sections.
HOW MIGHT WE
Translate to mobile responsive design?
SYNTHESIS
Translating features without losing functionality
Making a pushed version with the most characters to fit into a card to foresee appearance and eliminate issues down-the-line, especially in development.
Opportunities for exploration.
Designing a fun sorting filter and providing just enough friction cues for users to feel encouraged in exploring the other pages. Framing the journey as an experience rather than a task.
REFLECTION
💡 Working in a close-knit team of product manager, developer and designers.Some highlights: developer insights on design scalability, and from designers, being shown more efficient ways on animating prototypes and organising figma files. From both, the importance of collaboration and establishing clear communication channels.
REFLECTION
🌱 Adapting within the design process.Leaning into stakeholder and team feedback and constraints like time. Utilising how to best use your skills and time as a designer to advocate for the end-user, and cater to the project as a holistic goal. Stakeholders may have different methodologies so learning how to continuously evolve into what the project needs or what would make the process more efficient.